<template>
  <view class="filter-date-range" v-if="cfg">
    <view class="filter-input" @click="showPicker">
      <view class="">
        <text v-if="cfg&&cfg.colName&&range&&range[0]">{{range[0]}}</text>
        <text v-else class="text-gray">选择开始日期</text>
      </view>
      <view class="separator">
        -
      </view>
      <view class="">
        <text v-if="cfg&&cfg.colName&&range&&range[1]">{{range[1]}}</text>
        <text v-else class="text-gray">选择结束日期</text>
      </view>
    </view>
    <u-calendar :show="show" mode="range" color="#38C09E"  @confirm="confirm"></u-calendar>
    <view class="" style="width: 40rem;margin-left: 2rem;">
      <u-subsection mode="subsection" activeColor="#38C09E" :list="subList" :current="curSub" @change="change">
      </u-subsection>
    </view>
  </view>
</template>

<script>
  export default {
    name: "filter-date-range",
    props: {
      cfg: {
        type: Object
      },
    },
    data() {
      return {
        show: false,
        curSub: -1,
        range: ['', ''],
        subList: ['今天', '昨天', '本周', '本月']
      };
    },
    methods: {
      showPicker() {
        this.show = true
      },
      confirm(e) {
        this.curSub = -1
        this.show = false
        if (this.cfg?.colName) {
          if (e.length > 2) {
            this.range = [e[0], e[e.length - 1]]
          } else {
            this.range = e
          }
        }
      },
      change(e) {
        this.curSub = e
        let startDate = ''
        let endDate = ''
        if (this.subList[e] == '今天') {
          startDate = this.dayjs().format("YYYY-MM-DD")
          endDate = startDate
        } else if (this.subList[e] == '昨天') {
          startDate = this.dayjs().subtract(1, 'day').format("YYYY-MM-DD")
          endDate = startDate
        } else if (this.subList[e] == '本周') {
          startDate = this.dayjs().day(1).format("YYYY-MM-DD")
          endDate = this.dayjs().day(7).format("YYYY-MM-DD")
        } else if (this.subList[e] == '本月') {
          startDate = this.dayjs().startOf('month').format('YYYY-MM-DD')
          endDate = this.dayjs().endOf('month').format('YYYY-MM-DD')
        }
        this.range = [startDate, endDate]
      },
      getVal() {
        return this.range
      }
    },
  }
</script>

<style lang="scss" scoped>
  .filter-date-range {
    display: flex;
    align-items: center;

    .separator {
      margin: 0 2rem;
    }

    .filter-input {
      display: flex;
      align-items: center;
      border: 1px solid #f1f1f1;
      padding: 1rem 2rem;
      border-radius: 1rem;
      min-width: 40rem;
      justify-content: center;
    }
  }
</style>
